<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="UpdateTagModelObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>修改字典类型</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              key：
            </div>
            <input type="text"
                   v-model="AddData.key"
                   @blur="blur"
                   placeholder="字典类型的key"
                   class="modal-text f-l">
          </div>
          <div class="modal-row" v-show="spanShow">
            <span class="span-show f-r">
              已存在请重新输入
            </span>
          </div>
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              value：
            </div>
            <input type="text"
                   v-model="AddData.name"
                   placeholder="字典类型的value"
                   class="modal-text f-l">
          </div>
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              type：
            </div>
            <input type="text"
                   v-model="AddData.type"
                   placeholder="类型"
                   class="modal-text f-l">
          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "UpdateTagModel",
    props:["UpdateTagModelObj"],
    data(){
      return {
        AddData: {
          id: '',
          name: '' ,   // 标签名称
          key: ''  ,         // 标签标识
          type: ''  ,         // 标签类型
        },
        spanShow: false,
        initKey: ''
      }
    },
    methods:{
      // 通过字典标签id获取详情
      initData () {
        let url = this.Dictionary + "/tag/detail/id/" + this.AddData.id;
        this.$axios({
          url: url,
          method: 'get'
        })
          .then( res => {
            let data = res.data.tag;
            this.AddData.name = data.name;
            this.AddData.type = data.type;
            this.AddData.key = data.key;
            this.initKey = data.key;
          })
          .catch( err => {
            //console.log(err,"字典标签初始化");
          })
      },
      //提交
      subBtn(){
        //console.log(this.AddData);
        if(this.spanShow && this.AddData.key != this.initKey){
          this.s_alert('key重复不能新增!');
          // alert('标签标识重复不能新增');
          return false;
        }
        if( this.verifyForm.isNull(this.AddData.name) ){
          this.s_alert('value不能为空！');
          // alert("标识名称不能为空！");
          return false;
        }
        if( this.verifyForm.isNull(this.AddData.key) ){
          this.s_alert('key不能为空！');
          // alert("标签标识不能为空！");
          return false;
        }
        if( this.verifyForm.isNull(this.AddData.type) ){
          this.s_alert('type不能为空！');
          // alert("字典标识不能为空！");
          return false;
        }
        let url = this.Dictionary + '/tag/update';
        this.$axios({
          url: url,
          data: this.AddData,
          method: 'post'
        })
          .then(res => {
            //console.log(res);
            this.s_alert("修改成功！");
            // alert("修改成功！");
            this.s_logwrite("基础信息管理-字典管理","修改字典项");
            this.close();
          })
          .catch(res => {
            this.s_alert("修改失败");
            // alert("修改失败！");
            //console.log(res);
          })
      },
      // 字典标识 code 失去焦点
      blur () {
        if (this.initKey === this.AddData.key ) {
          this.spanShow = false;
          return false
        } else {
          this.$axios({
            url: this.Dictionary
              + '/tag/selectKey?key='
              + this.AddData.key,
            method: 'get'
          })
            .then(res => {
              this.spanShow = !res.data;
              if (this.spanShow) {
                this.AddData.key = this.initKey;
              }
              //console.log(res.data);
            })
            .catch(err => {
              //console.log(err,"标签类型 key 唯一性")
            })
        }
      },
      //关闭弹窗
      close(){
        this.$emit("UpdateTagModelClose");
        this.clearData(); //关闭弹窗清除数据
      },
      //清除数据
      clearData(){
        this.AddData={
          id: '',
          name: '' ,   // 标签名称
          key: ''  ,         // 标签标识
          type: ''  ,         // 标签类型
        };
        this.spanShow = false;
      }
    }, // methods end
    watch: {
      UpdateTagModelObj: {
        handler: function (val) {
          if (val.isShow) {
            this.AddData.id = val.id;
            this.initData();
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>
  .span-show {
    color: #ff0000;
    line-height: 1.2;
  }
</style>
